import React from 'react';
import { Button } from 'antd-mobile';
import { useNavigate } from 'react-router-dom';
import './Falsepage.css';

function Falsepage() {
    const navigate = useNavigate();

    const handleGoHome = () => {
        navigate('/layout/home');
    };

    const handleReload = () => {
        window.location.reload();
    };

    return (
        <div className="falsepage-container">
            <div className="error-content">
                <div className="error-icon">🚫</div>
                <h1 className="error-title">页面未找到</h1>
                <p className="error-description">
                    抱歉，您访问的页面不存在或已被移除
                </p>
                <div className="error-code">404</div>
                
                <div className="error-actions">
                    <Button 
                        className="action-btn home-btn"
                        fill="solid"
                        onClick={handleGoHome}
                    >
                        🏠 返回首页
                    </Button>
                    <Button 
                        className="action-btn reload-btn"
                        fill="outline"
                        onClick={handleReload}
                    >
                        🔄 重新加载
                    </Button>
                </div>
                
                <div className="error-tips">
                    <p>您可以尝试：</p>
                    <ul>
                        <li>检查网址是否正确</li>
                        <li>返回上一页</li>
                        <li>联系客服获取帮助</li>
                    </ul>
                </div>
            </div>
        </div>
    );
}

export default Falsepage;